<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">组织结构</h3>
                </div>
                <div class="box-body">
                  <section class="" id="departTree">
                    <departTree ref='departTree' v-on:nodechange="nodechange"></departTree>
                  </section>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">账号信息</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn btn-success">
                      <i class="fa fa-plus" @click="addVisible = true">新增账号</i>
                    </button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="accountDetail">
                    <div class="row">
                      <el-table stripe :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="selectedAccounts" border style="width: 100%">
                        <el-table-column type='index' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop"  :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column  label="操作" width="200">
                          <template scope="scope">
                            <el-button @click="editAccount(scope.row)" type="text" size="small">
                              <i class="fa fa-edit">编辑</i>
                            </el-button>
                            <el-button @click="deleteAccount(scope.row)" type="text" size="small">
                              <i class="fa fa-trash">删除</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title='新增用户账号' :visible.sync="addVisible" :modal="false" size="small">
          <accountEdit ref='newAccount' :selectedNode="selectedNode" v-if='addVisible' :users="users" :roles="roles" v-bind:isReadOnly="false"></accountEdit>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">关 闭</el-button>
            <el-button type="primary" @click="addAccount">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title='编辑用户账号信息' :visible.sync="editVisible" :modal="false" size="small">
          <accountEdit ref='accountEdit' v-if='editVisible' :selectedNode="selectedNode" :edit='true' :roles="roles" :account="selectAccount" :users="users" v-bind:isReadOnly="false"></accountEdit>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">关 闭</el-button>
            <el-button type="primary" @click="updateAccount">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import Common from "./common"
import accountUtils from "../../common/accountUtils"
import Utils from "../../common/utils"
import departTree from '../mycomponents/departs/departTree'
import accountEdit from '../mycomponents/account/accountEdit'
let accountUtil = new accountUtils()
let util = new Utils()
export default {
  "name":"accountMgr",
  data:function() {
    return {
      id:'id',
      emptyText:'空',
      addVisible:false,
      editVisible:false,
      queryData: accountUtil.getDefaultUserQueryData(4),
      columns:accountUtil.getAccountColumns(),
      selectedNode:null,
      selectAccount:null,
      users:[],
      roles:[],
      selectedAccounts:[]
    }
  },
  components:{
    departTree,
    accountEdit
  },
  created: function() {
    this.helper = new Common()
  },
  mounted:function(){
    this.$nextTick(() => {
      this.helper.autoheight("accountDetail")
      this.helper.autoheight("departTree")
      this.getRoles()
    })
  },
  methods:{
    editAccount(row){
      this.getAccount(row)
      this.editVisible = true
    },
    getAccount(row){
      for(var index in this.selectedAccounts){
        if(this.selectedAccounts[index].id == row.id){
          this.selectAccount = this.selectedAccounts[index]
          this.selectAccount.uid = this.selectAccount.personId
        }
      }
    },
    getRoles() {
      var that = this
      util.listRoles(this.queryData, function(response) {
        if(response.body.result == 1){
          that.roles = response.body.body
          that.$store.commit('SET_ROLES', that.roles)
        }
        else{
          that.onFail(response.body.result)
        }
      }, function(response) {
        console.log('query roles failed:' + response.data)
      })
    },
    deleteAccount(row){
      this.getAccount(row)
      var that = this
      accountUtil.deleteAccount(this.selectAccount,(response)=>{
        if (response.body.result == 1) {
          that.getAccountData()
        }
      },(response)=>{
          console.log('query users failed:'+response.body)
      })
    },
    nodechange:function(node){
      this.selectedNode = node
      this.getAccountData()
      this.getUserData(node)
    },
    resetPwd(row) {
      // todo 添加修改密码实现
      // console.log('edit data:' + JSON.stringify(row))
      // this.hackReset = false
      // var that = this
      // this.getUser(row.id, function(data) {
      //   if(util.parseData(data, that.selectedUser.data,that))
      //   that.hackReset = true
      //   that.showModal('editModal')
      // });
    },
    getAccountData(){
      var that = this
      accountUtil.getAccountData(this.selectedNode.id,(response)=>{
        if (response.body.result == 1) {
          console.log('query user data id ' + JSON.stringify(response.body));
          that.selectedAccounts = response.body.body
        }
      },(response)=>{
          console.log('query users failed:'+response.body)
      })
    },
    updateAccount(){
      var that = this
      var editAccount = this.$refs.accountEdit.getData()
      accountUtil.updateAccount(editAccount,(response)=>{
        if (response.body.result == 1) {
          console.log('query user data id ' + JSON.stringify(response.body));
          that.getAccountData()
          that.editVisible = false
        }
      },(response)=>{
          console.log('query users failed:'+response.body)
      })
    },
    addAccount:function(){
      this.hackReset=false
      var that = this
      var data = this.$refs.newAccount.getData()
      data.state =1
      accountUtil.addAccount(data,(response)=>{
        if (response.body.result == 1) {
          console.log('query user data id ' + JSON.stringify(response.body));
          that.getAccountData()
          that.addVisible=false
        }
      },(response)=>{
        this.hackReset=true
        if (response.body.result == -1) {
          console.log('add users user existed ' + JSON.stringify(response.body));
        }
        else
          console.log('add users failed:'+response.body)
      })
    },
    getUserData(node) {
      var that = this
      this.queryData.conditions=[]
      this.queryData.conditions.push({
          field: "departmentId",
          op: "=",
          value: node.id
        })
      util.queryUserData(this.queryData, function(response) {
        that.users = response.body.body.rows
      }, function(response) {
        console.log('query failed:' + response.data)
      })
    },
  }
}
</script>
